<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    li{
        list-style: none;
    }
    </style>
    <script src="./js/vue.js"></script>
</head>

<body>
    <div id="app">
        <ul>
            <li v-for="(item,index) in mydata">
                <h1>名称:{{item.name}}</h1>
                <p>单价:{{item.price}}</p>
                <p>价格:{{item.price*item.num}}</p>
                <button @click="add(index)">-</button>
                <span>{{item.num}}</span>
                <button @click="del(index)">+</button>
            </li>
        </ul>
        <div>总价:{{allPrice}}</div>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                mydata:[
                    {"name":"苹果","price":20,"num":0},
                    {"name":"桃子","price":10,"num":0},
                    {"name":"西瓜","price":30,"num":0},
                ],
                allPrice:0
            },

            methods:{
                add(index){
                    if(this.mydata[index].num==0)return;
                    this.mydata[index].num--,
                    this.sum();
                },
                del(index){
                    
                    this.mydata[index].num++,
                    this.sum();
                },
                sum(){
                   var allPrice=0;
                   this.mydata.forEach((item,index)=>{
                      allPrice+=item.num*item.price
                   });
                    this.allPrice=allPrice;
                }

            }
        })


    </script>
</body>

</html>